So as we mentioned, the header is here at the top of the page where it says “Add header” and a word about the header, the header is actually a template. It’s not located in the page, you’re only previewing it in the page, and it’s located in the Theme Builder. So let’s take a quick look at the theme builder. If we click the hamburger icon, and then theme builder, you see that the theme builder opens here and we can see all the website parts that were included with our kit.

So that includes the Single post, the 404 page and the Header and Footer. So I could also edit my header from the theme builder, but I prefer to edit it from within the context of my page. I just wanted to show you where it’s located so you’ll know where to find the theme builder so we can close out the theme builder.

And now I’ll click edit header and now I’m in the header so you can see in the header we have three columns and each column has a widget in it, so let’s go through them widget by widget to fix up our header. First of all, I’ll click here on the site logo and I have a prompt here to change the site logo, so I’ll go ahead and click that and as you can see, I’ve now been taken to these site settings area and changes here affect our whole site and not just the page.

So while we’re here, we can go ahead and set up our other site settings. We’ll start by typing in our site name and then we’ll type in our site description. And next we can add our site logo. So I will click to choose an image, and in this case I will be uploading my own file and I will go ahead and drag it in and once again I can type in my alt text and click select and next I can add in my favicon.

So the favicon is this little icon that appears on the left side of your browser tab that shows up here in your browser and allows your visitors to quickly identify your website. So don’t forget to add that to your site. Go ahead and click here to choose an image and once again I will upload my own file. So I will just drag that in and I’ll go ahead and select.

Okay. So in case you’re wondering why you don’t see the logo yet or the favicon, we’ll first go ahead and click update. Then we will refresh our page. And as you can see, our logo has been added. And if we click on the icon down here at the bottom to preview our changes in another tab, you can see that the favicon has been added up here.

So we’re all set on that and we can go back to editing our header. So we’ll click back inside edit header and I will select the logo and once again I have options to change the alignment caption link and style it. I can change the width. I don’t want to change it too much since that is my logo.

So let’s move on now to the next widget and I’ll go ahead and select that and we’ll go ahead and we’ll change our NAV menu or WordPress menu. So you can see here that on the left, when we go into our options that we have a suggestion to go to the menu screen to manage our menu. So we’ll go ahead and we’ll start by doing that.

As you can see, it’s opened in the menu section and I have two menus here. If I click here, I can see I have two menus, I have the footer menu and the main menu, and I want to work on the main menu now. So I’m going to go ahead and click main menu and click select. And you can see now I’m working in the main menu.

So these are the links in our main menu. And if I want to add another link to the navigation menu, I can choose it from over here on the left. So let’s say I want to add the Contact Us page. I can add it to the menu like that and you can see that now it’s been added to below and I could drag it or I can drag it to change the order, or if I want to use it as a dropdown, as a sub item, I can just drag it a little to the right and place it where I want it to dropdown.

So once my menu is ready, I’ll go ahead and click Save menu and now I can go back to the home page and I can choose the menu that I want to use. I’ll choose Main menu. And as you can see, I have the contact us added as a sub-item. Now we can go ahead and edit the settings of our menu so you can see first of all, we have layout options.

You can make it vertical or drop down. And if you wanted to only use an icon, I’m going to go ahead and put it back to horizontal and then you can change the alignment if you want to the left or stretch it. I’ll keep mine in the center and then you have the pointer. So the pointer by default, as you can see, is set to underline, and that’s the line that appears when I hover over.

And now a menu item and I could change that to another pointer, you can go through and check them out and you have the animation, which changes the way the pointer displays. Below that you have the sub-menu indicator, and that is this little triangle you see here. You could turn it off completely if you didn’t want any indicator, or you could change it by clicking it and opening.

In the Icon library. You can see I have a few suggestions and I’ll choose the chevron. If I wanted, I could go through and choose another icon or even upload my own. I’ll go ahead and insert it. And you can see it changed to the chevron. Next, we’ll talk about mobile dropdown. In order to explain mobile dropdown, I will go into responsive mode so you can do that from this from the bottom panel here.

If I click it, you can see that I get this black bar across the top, which has various screen sizes. So right now I’m in desktop and my breakpoint is set to mobile portrait. So let’s see what that means. So as I said, we’re here in desktop and our menu looks like this and when we switch to tablet, our menu still looks pretty much the same.

But when I switch to mobile, it turns into a hamburger menu, and that’s because the dropdown has been set to mobile. If I wanted I could change it to tablet, but I will leave it on mobile since it all fits in tablet. And now let’s click it so we can see what it looks like when it’s open. So this is our open menu in mobile, and if you wanted, you could turn off full width.

I’m going to leave it on full width. You can change the alignment, let’s say to the center, leave it aside, and you can also decide on what you want for the toggle button. Right now it’s a hamburger icon when it’s closed, but if you didn’t want any icon there, you could turn it to none. So I will leave it on hamburger and here I have the options to actually change it to a different icon.

So if I wanted to have an icon but not a hamburger icon, I could click in the Icon library and I could change it to something else. I’m going to leave it on hamburger, since I think that’s the most recognizable icon for a menu. Okay. And then we can also change toggle it if we wanted it to align to the left or the center, I’ll leave mine on the right.

So that’s our menu content. Now we can go ahead and style it. So I’ll click on Style and I will close out responsive mode. Okay, So I’ll go ahead and change the typography. I’ll choose a global font…I’ll choose a global color as well. Notice here that I’m on the normal state, so I will choose my blue color, but I can change that for hover and for active.

So for example, right now when I hover over, it’s red, and if I click on hover, you can see it’s red and I have the option here to change that. You can go through the different normal and hover options and you also have an option for active. So that’s when you’re actually on that page and you can set up the styling there.

Let’s go ahead and continue through the options we have. A divider can add a divider. You have options for the divider. You can try those out. You can also change the color of the divider and you have some other options you can go through and play around with. You also have the dropdown options. So this is the dropdown.

If you recall, you could change the styling for that and you can go through and check them out and you also have options for the toggle so you could change those as well. Okay. So let’s move on to the button. So I’ll go ahead and click the button and this is a great time to show you the the in page preview option.

So if you click here, you can see the page in full width or you can use command or control. P Okay, so let’s set up our button. First of all, we have text. I’ll go ahead and change it to contacts and I will add a link. Right now I have a default link in there from the library and if I want to change my link, I can remove that and start typing in the name of the page.

So in this case I’d want it to go to the contact page. So I’ll type in the word contact and as you can see, my contact us page pops up and I can just click it and it will add a link for me. I can change the alignment of the button. In this case, I have a small column, so it’s not changing, but if you had a wider column, the alignment would change.

I can add an icon, for example. So if I wanted to add an icon, let’s say I want an envelope, I’ll just type start typing in the word envelope, select it and insert it. And now I can move it to after if I prefer the icon to be on the other side and add some spacing and then we can move on to style our button.

So a lot of these options should be looking pretty familiar by this point. You can change the typography and you can change the text color. Let’s quickly check out the cover. So if I click on Hover and I go over to my button, I can hover over for preview. So right now you can see that the button color is the same color as the background.

But let’s say I wanted to change that. I can click here and select a different color. And now when I hover over it, you can see it’s changed to white. So those are some ideas for buttons and that pretty much wraps up the header. So let’s go ahead and update our header. I will scroll down the page and let’s take a quick look at the footer.

So once again, you have the footer here and similar to the header, you can just click here to edit your footer and you can edit the widgets in the same way we did for the header and the page. That’s pretty much it to edit in your homepage. So let’s go out now and we will go back to our WordPress dashboard so I can click here to exit.

So now I’d like to show you how to add a new page to your website. So I’ll go ahead and click pages and I’ll click Add new and I’m prompted to name my page. So I’ll call it info and I’ll hit save and it opens directly into the editor to my new page. It doesn’t look like a blank page yet, but it’s actually just pulling in our header and footer and it’s showing the page title here as well.

I don’t want to show the title, so I’ll go to my page settings and I can switch the toggle to yes to hide the title. Now the title has been hidden, but if you wanted a completely blank page with no header or footer, you could switch the page layout to element or canvas. Okay, so now I have a truly blank page.

If you change your mind and you want to switch it back, you can select element or full width. Once your page is ready, click publish. You also have a few options here. You can save it as a draft or save your whole page as a template. I’ll go back out to the WordPress Dashboard now and you can see it’s been added here in my pages.